<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 杨雨翰
 * @LastEditTime: 2022-01-06 15:27:28
-->
<template>
  <!-- 监控区域模块制作 -->
  <div id="panel monitor" style="overflow: hidden; height: 400px">
    <div class="inner">
      <div class="content" style="display: block">
        <div class="head">
          <span class="col">序号</span>
          <span class="col">设备编号</span>
          <span class="col">设备位置</span>
          <span class="col">报警信息</span>
        </div>
        <div class="marquee-view" style="overflow: hidden; margin-top: 15px">
          <div class="marquee">
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
            <div class="row">
              <span
                class="col"
                style="display: inline-block; width: 60px; text-align: center"
                >99</span
              >
              <span
                class="col"
                style="display: inline-block; width: 70px; text-align: center"
                >DV-003</span
              >
              <span
                class="col"
                style="display: inline-block; width: 120px; text-align: center"
                >广西科技大学</span
              >
              <span class="col">排放超标</span>
              <span class="icon-dot"></span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
/* 监控区域模块制作 */
#monitor {
  height: 6rem;
}

#monitor .inner {
  padding: 0.3rem 0;
  display: flex;
  flex-direction: column;
}

#monitor .tabs {
  padding: 0 0.45rem;
  margin-bottom: 0.225rem;
  display: flex;
}

#monitor .tabs a {
  color: #1950c4;
  font-size: 0.225rem;
  padding: 0 0.3375rem;
}

#monitor .tabs a:first-child {
  padding-left: 0;
  border-right: 0.025rem solid #00f2f1;
}

#monitor .tabs a.active {
  color: #fff;
}

#monitor .content {
  flex: 1;
  position: relative;
  display: none;
}
.content .head .col {
  margin-left: 15px !important;
  font-size: 18px !important;
  color: #84d4fb !important;
  font-weight: bold !important;
}
/* #monitor .head {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.45rem;
  color: #68d8fe;
  font-size: 0.175rem;
} */
#monitor .marquee-view {
  position: absolute;
  top: 0.5rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

#monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}

#monitor .row:hover .icon-dot {
  opacity: 1;
}

#monitor .col:first-child {
  width: 1rem;
}

#monitor .col:nth-child(2) {
  width: 2.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

#monitor .col:nth-child(3) {
  width: 1rem;
}

/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
  animation: move 10s linear infinite;
  color: #84d4fb !important;
}
.marquee-view .marquee .col {
  font-size: 14px !important;
}
@keyframes move {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}

/* 3.鼠标经过marquee 就停止动画 */

.marquee-view .marquee:hover {
  animation-play-state: paused;
}
</style>